<gm:page title="encuesta PAW" authenticate="true" onload="init()" >





<!-- Se podría subir un archivo externo con la siguiente expresión 
    <gm:data id="encuesta" data="http://.../encuesta.xml"> -->

<gm:data id="encuesta">
<feed>
       <entry>
        <id>0</id>
        <gmd:num>1</gmd:num>
        <gmd:pregunta>¿bla ble bli blo?</gmd:pregunta>
        <gmd:respuestaA>bla </gmd:respuestaA>
        <gmd:respuestaB>ble </gmd:respuestaB>
        <gmd:respuestaC>bli </gmd:respuestaC>
        <gmd:eleccion></gmd:eleccion>
      </entry>
       <entry>
        <id>1</id>
        <gmd:num>2</gmd:num>
        <gmd:pregunta>¿bla ble bli blo?</gmd:pregunta>
        <gmd:respuestaA>bla </gmd:respuestaA>
        <gmd:respuestaB>ble </gmd:respuestaB>
        <gmd:respuestaC>bli </gmd:respuestaC>
        <gmd:eleccion></gmd:eleccion>
      </entry>
       <entry>
        <id>2</id>
        <gmd:num>3</gmd:num>
        <gmd:pregunta>¿bla ble bli blo?</gmd:pregunta>
        <gmd:respuestaA>bla </gmd:respuestaA>
        <gmd:respuestaB>ble </gmd:respuestaB>
        <gmd:respuestaC>bli </gmd:respuestaC>
        <gmd:eleccion></gmd:eleccion>
      </entry>
       <entry>
        <id>3</id>
        <gmd:num>4</gmd:num>
        <gmd:pregunta>¿bla ble bli blo?</gmd:pregunta>
        <gmd:respuestaA>bla </gmd:respuestaA>
        <gmd:respuestaB>ble </gmd:respuestaB>
        <gmd:respuestaC>bli </gmd:respuestaC>
        <gmd:eleccion></gmd:eleccion>
      </entry>
       <entry>
        <id>4</id>
        <gmd:num>5</gmd:num>
        <gmd:pregunta>¿bla ble bli blo?</gmd:pregunta>
        <gmd:respuestaA>bla </gmd:respuestaA>
        <gmd:respuestaB>ble </gmd:respuestaB>
        <gmd:respuestaC>bli </gmd:respuestaC>
        <gmd:eleccion></gmd:eleccion>
      </entry>


      
    </feed>

</gm:data>

<style>  
#body
{
  max-width:350px;
  min-width:100px;
}  
.list
{
  width:60%;
 float:left;
}
  
.item
{
 width:40%;

 float:right;

}

.item .pregunta
{
font-weight:bold;
text-transform:capitalize;

}
    
</style> 



<div id="body">
<div class="gm-app-header">
    <h1 onclick="del()">Encuesta PAW</h1>
    <div id="mensajes"></div>
    <!--
    <gm:subscribe style="display:inline" data="${listRespuestas}" label="guarda la encuesta en formato rss"/>
    -->
</div>
<div class="listanditem">
<div class="list">
     
      <gm:list id="listRespuestas" data="${tmp}/respuestas" template="templateEncuesta">
          <gm:handleEvent event="select" execute="cambiaItem('upDate')"/>
      </gm:list>
</div>
<div class="item">     
      <gm:item id="itemSeleccionado" data="${listRespuestas}" template="templateItem">
         <gm:handleEvent event="select" src="listRespuestas"/>
      </gm:item>        
</div>    
</div>    
</div>   
<div id="debug" style="float:right;width:200px;display:block">
<gm:list id="listEncuesta" data="${encuesta}" template="debug" style="display:none"/>  

<gm:list id="listGuardada" data="${user}/respuestas" template="debug" style="display:inline"/>  
</div> 

<gm:template id="templateEncuesta">  

<table class="green-theme">
    <tr repeat="true" >
      <td class="c1" >
        <gm:number ref="gmd:num"/>
      </td>
      <td class="c2">
        <gm:text ref="gmd:pregunta"/>
      </td>
      <td class="c3">
        <gm:toggle/><gm:debug ref="." class="gm-toggled"/>
        <gm:text id="vistaPreviaEleccion" ref="gmd:eleccion"/>
      </td>
    </tr>
  </table>
     
</gm:template>



<gm:template id="templateItem">
 <div class="templateItem">

      <p class="pregunta">Pregunta  <gm:number ref="gmd:num" /></p>

      <p><gm:text ref="gmd:pregunta"/></p>

      <form> 
      <p><input type="radio" id="inputA" value="A" onclick="guardaRespuesta(this.value)"><gm:text ref="gmd:respuestaA"/></input><br/></p>
      <p><input type="radio" id="inputB" value="B" onclick="guardaRespuesta(this.value)"><gm:text ref="gmd:respuestaB"/></input><br/></p>
      <p><input type="radio" id="inputC" value="C" onclick="guardaRespuesta(this.value)"><gm:text ref="gmd:respuestaC"/></input><br/></p>
      </form>
        
        <button id="botonAnterior" onclick="cambiaItem('anterior')">&lt;&lt;&lt;</button>
        <button id="botonSiguiente" onclick="cambiaItem('siguiente')">&gt;&gt;&gt;</button><br/>
     <p><button id="del" onclick="del()">borrar la encuesta guardada</button></p>

 </div> 

</gm:template>



<script type="text/javascript">
<![CDATA[ 

var eleccionGPath;
var listEncuesta;
var listRespuestas;
var numPreguntaSeleccionada;
var listGuardada;
  
function init()
{
  try
  {

  eleccionGPath = new GPath('gmd:eleccion');
  listEncuesta = google.mashups.getObjectById('listEncuesta');
  listRespuestas = google.mashups.getObjectById('listRespuestas');
  listGuardada = google.mashups.getObjectById('listGuardada');
  
  //se crea un copia la encuesta original para trabajar sobre la copia, 
  //cada usuario tendrá su copia
  copiaEncuesta();

  //selecciono la primera pregunta.
  listRespuestas.selectEntry(listRespuestas.getData().entryAt(0));

    }

  catch(err)
  {
  alert('mec!!!!INIT '+ err);
  }
}

  
function copiaEncuesta()
{
             
  try
  {
  if (listGuardada.getData().size() != listEncuesta.getData().size())
  {
  alert(listGuardada.getData().size() + '  ' + listEncuesta.getData().size() );
  var entry;
  for(i=0;i<=listEncuesta.getData().size()-1;i++)
    {
    entry = listEncuesta.getData().entryAt(i);
    listRespuestas.getData().addEntry(entry);
    }
  }
  else
  {
    alert('setdataguardada');
    listRespuestas.setData(listGuardada.getData());
  }
  }
  catch(err)
  {
  alert('mec!!!! COPIA ENCUESTA'+ err);
  }
}  
  
function guardaRespuesta(respuesta)
{
  var entry;
  try
  {
  entry = listRespuestas.getSelectedEntry();
  eleccionGPath.setValue(entry,respuesta);
  listRespuestas.getData().updateEntry(entry);
  cambiaItem('siguiente');
  }

  catch(err)
  {
  alert('mec!!!! guardaRespuesta  '+ err);
  }
}


//hay 3 acciones: siguiente, anterior y upDate.
//Esta función se llama desde 
//los botones siguiente/anterior, al responder una pregunta o 
// al seleccionar con el raton un pregunta de la lista 
//(evento recogido por gm:handleEvent event="select" execute="cambiaItem('upDate')")

function cambiaItem(accion) 
{
try
{
  // este if es por si se desseleciona la pregunta con el raton no hacer nada.
  if(listRespuestas.getSelectedEntry()!= null)
  {
    numGPath = new GPath('gmd:num');
    numPreguntaSeleccionada = numGPath.getValue(listRespuestas.getSelectedEntry());
 
    switch(accion)
    {
    case 'siguiente':
      if (numPreguntaSeleccionada == listRespuestas.getData().size())
      {
      encuestaFinalizada();    
      }
      else
      {
      var siguienteEntry = listRespuestas.getData().entryAt(numPreguntaSeleccionada-1 +1 );
      listRespuestas.selectEntry(siguienteEntry);
      }
      break;    
    case 'anterior':
      if (numPreguntaSeleccionada > 1)
      {
      var anteriorEntry = listRespuestas.getData().entryAt(numPreguntaSeleccionada -1 -1 );
      listRespuestas.selectEntry(anteriorEntry);
      }
      break;
    case 'upDate':

     // var actualPregunta =  listRespuestas.getData().entryAt(numPreguntaSeleccionada -1);
     // listRespuestas.selectEntry(null);
     // listRespuestas.selectEntry(actualPregunta);
    break;
    }
       seleccionaRespuestaActiva();

  }  
  }

  catch(err)
  {
  alert('mec!!!! cambiaItem       '+ err);
  }
}  
  
function encuestaFinalizada()
{
try
{
  //compruebo si hay respuestas sin responder. 
  guardaEncuesta();
  var eleccion;
  var numPreguntasVacias=0;
  for(i=0;i<=listRespuestas.getData().size()-1;i++)
    {
    eleccion = eleccionGPath.getValue(listRespuestas.getData().entryAt(i));
    if (eleccion == '' || eleccion == null) numPreguntasVacias++ ;
    }
  if (numPreguntasVacias != 0)
  {
  document.getElementById('mensajes').innerHTML ='<div id="alerta"><p>Hay '+ numPreguntasVacias + ' preguntas sin responder, puede responderlas ahora o cuando vuelva a aceder</p></div>';
  }

  //desselecciono la pregunta y muestro el mensaje de gracias
  // El if es para que rellene el innerHTML o lo subtituya y asi no se acumulan los mensajes
  listRespuestas.selectEntry(null);

  if (numPreguntasVacias == 0)
  {
  document.getElementById('mensajes').innerHTML ='<div id="mensajeFinal"><p>Gracias por realizar nuestra encuesta</p><p>Su encuesta está guardada en nuestros servidores.Puede acceder cuando quiera para modificarla </p></div>';
  }
  else
  {
  document.getElementById('mensajes').innerHTML +='<div id="mensajeFinal"><p>Gracias por realizar nuestra encuesta</p><p>Su encuesta está guardada en nuestros servidores.Puede acceder cuando quiera para modificarla </p></div>';
  } 
}
catch(err)
 {
 alert('mec!!!! ENCUESTA FINALIZADA  '+ err);
 }

 
}

function seleccionaRespuestaActiva()
{
  try
  {
    //ahora selecciono la respuesta si está previamente contestada
    var entryActual = listRespuestas.getSelectedEntry();
    var eleccionActual = eleccionGPath.getValue(entryActual);
   
    if (eleccionActual == 'A' || eleccionActual == 'B' || eleccionActual == 'C')
    {
    document.getElementById('inputA').checked = false;
    document.getElementById('inputB').checked = false;
    document.getElementById('inputC').checked = false;
    document.getElementById('input'+ eleccionActual).checked = true;
    }

  }
  catch(err)
  {
  
 //alert('mec!!!! seleccionaRespuestaActiva  '+ err);
  }
}    
  

function  guardaEncuesta()
{
  try
  {
   del();
   var entry;
   var entryGuardada;
   
   var eleccion;
   var pregunta;
   var respuestaA;
   var respuestaB;
   var respuestaC;
   var num;
  
   var preguntaGPath = new GPath('gmd:pregunta');
   var respuestaAGPath = new GPath('gmd:respuestaA');
   var respuestaBGPath = new GPath('gmd:respuestaB');
   var respuestaCGPath = new GPath('gmd:respuestaC');
   var numGPath = new GPath('gmd:num');
   
   for(i=0;i<=listRespuestas.getData().size()-1;i++)
   {
   entry =  listRespuestas.getData().entryAt(i);
   entryGuardada = listGuardada.getData().createEntry();
     
   eleccion = eleccionGPath.getValue(entry);
   
   pregunta = preguntaGPath.getValue(entry);
   respuestaA = respuestaAGPath.getValue(entry);
   respuestaB = respuestaBGPath.getValue(entry);
   respuestaC = respuestaCGPath.getValue(entry);
   num = numGPath.getValue(entry);
   
   if(eleccion)
     {
   eleccionGPath.setValue(entryGuardada,eleccion);
     }
   else
      {
   eleccionGPath.setValue(entryGuardada,'');
      } 
   preguntaGPath.setValue(entryGuardada,pregunta);
   respuestaAGPath.setValue(entryGuardada,respuestaA);
   respuestaBGPath.setValue(entryGuardada,respuestaB);
   respuestaCGPath.setValue(entryGuardada,respuestaC);
   numGPath.setValue(entryGuardada,num);
      
   listGuardada.getData().addEntry(entryGuardada);  
   }
   
  }
  catch(err)
  {
  
   //alert('mec!!!! guardaEncuesta   '+ err);
  }
}     
function del() 
{   
   for (i=0 ; i < listGuardada.getData().size();i++)
    {
    var entry = listGuardada.getData().entryAt(i);
     listGuardada.getData().removeEntry(entry);      
    }
}
  
  
]]>
</script>

</gm:page>